import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Input, Button, Message, Card } from "@arco-design/web-react";

const FormItem = Form.Item;

export default function Login() {
  const navigate = useNavigate();

  const [form] = Form.useForm();

  const handSubmit = () => {
    form.validate().then(async (values) => {
      console.log("values==", values);
      Message.success(`登录成功`, values);
    });
  };

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === "Enter") {
        handSubmit();
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  });

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Card style={{ width: 660 }} title="Welcome to Presto">
        <Form form={form} autoComplete="off" style={{ width: 600 }}>
          <Form.Item
            label="邮箱"
            field="email"
            rules={[
              {
                type: "email",
                validateLevel: "warning",
              },
              {
                required: true,
                message: "请输入邮箱",
              },
            ]}
          >
            <Input placeholder="" />
          </Form.Item>
          <FormItem
            label="密码"
            field="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <Input.Password placeholder="" />
          </FormItem>
          <FormItem wrapperCol={{ offset: 5 }}>
            <Button
              type="primary"
              onClick={handSubmit}
              style={{ marginRight: 24 }}
            >
              登录
            </Button>
            <Button
              type="text"
              style={{ marginRight: 24 }}
              onClick={() => {
                navigate("/register");
              }}
            >
              去注册
            </Button>
          </FormItem>
        </Form>
      </Card>
    </div>
  );
}
